<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>若依宠物商城管理系统</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
	<style>
		/* 宠物主题基础样式 */
        :root {
            --primary-color: #ff9a3c;
            --secondary-color: #ff6b6b;
            --accent-color: #5d9c59;
            --light-color: #fff9f0;
            --dark-color: #523a34;
            --text-color: #4a3c31;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #fff9f0 0%, #ffe8d4 100%);
            color: var(--text-color);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,40 Q35,25 50,40 Q65,55 80,40" stroke="%23ff9a3c" fill="none" stroke-width="1" opacity="0.1"/><circle cx="30" cy="35" r="5" fill="%23ff9a3c" opacity="0.1"/><circle cx="70" cy="35" r="5" fill="%23ff9a3c" opacity="0.1"/></svg>');
        }

        /* 宠物爪子背景效果 */
        .paw-prints {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            opacity: 0.2;
        }

        .paw {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="30" r="20" fill="%235d9c59"/><circle cx="30" cy="60" r="15" fill="%235d9c59"/><circle cx="70" cy="60" r="15" fill="%235d9c59"/><circle cx="45" cy="75" r="15" fill="%235d9c59"/><circle cx="75" cy="75" r="15" fill="%235d9c59"/></svg>');
            background-size: contain;
            animation: float 8s infinite linear;
            opacity: 0.7;
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
            25% { transform: translateY(-20px) rotate(10deg); }
            50% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
            75% { transform: translateY(20px) rotate(-10deg); }
            100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
        }

        /* 头部样式 */
        .pet-header {
            padding: 20px 0;
            position: relative;
            overflow: hidden;
            height: 350px;
        }

        .hero-carousel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }

        .carousel-item {
            height: 350px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .carousel-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(82, 58, 52, 0.8), transparent);
        }

        .carousel-caption {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            width: 100%;
            padding: 20px;
        }

        .carousel-caption h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            color: white;
        }

        .carousel-caption p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        /* 卡片样式 */
        .pet-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            border: 1px solid rgba(255, 154, 60, 0.3);
            box-shadow: 0 8px 32px rgba(93, 156, 89, 0.1);
            color: var(--text-color);
            margin-bottom: 25px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .pet-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
        }

        .pet-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(93, 156, 89, 0.25);
        }

        .pet-card-header {
            padding: 20px 20px 15px;
            border-bottom: 2px dashed rgba(93, 156, 89, 0.2);
            position: relative;
            display: flex;
            align-items: center;
        }

        .pet-card-header h5 {
            color: var(--dark-color);
            font-weight: 700;
            display: flex;
            align-items: center;
            margin: 0;
        }

        .pet-card-header i {
            margin-right: 10px;
            color: var(--primary-color);
            font-size: 1.5rem;
        }

        .pet-card-body {
            padding: 20px;
        }

        .pet-image-container {
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
            position: relative;
        }

        .pet-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .pet-image-container:hover .pet-image {
            transform: scale(1.1);
        }

        /* 标题和链接样式 */
        h2, h4, .panel-title a, .panel-title code {
            color: var(--dark-color);
            font-weight: 700;
        }

        h2 {
            position: relative;
            padding-bottom: 15px;
            font-size: 2rem;
            margin: 30px 0;
            display: flex;
            align-items: center;
        }

        h2 i {
            margin-right: 15px;
            font-size: 2rem;
            color: var(--secondary-color);
        }

        h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--secondary-color);
            border-radius: 3px;
        }

        a {
            color: var(--accent-color);
            transition: color 0.3s ease;
            text-decoration: none;
        }

        a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        /* 按钮样式 */
        .pet-btn {
            border-radius: 50px;
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            color: white;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .pet-btn i {
            margin-right: 8px;
        }

        .pet-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 14px rgba(255, 107, 107, 0.4);
            background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
            color: white;
        }

        /* 列表样式 */
        ol, li {
            color: var(--text-color);
        }

        li {
            padding: 8px 0;
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
        }

        li::before {
            content: '🐾';
            position: absolute;
            left: 0;
            top: 8px;
            font-size: 14px;
        }

        /* 响应式调整 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        @media (max-width: 992px) {
            .dashboard-header {
                margin-bottom: 20px;
            }

            .col-sm-3, .col-sm-4, .col-sm-5 {
                margin-bottom: 30px;
            }

            .carousel-caption h1 {
                font-size: 1.8rem;
            }

            .carousel-caption p {
                font-size: 1rem;
            }
        }

        /* 标签样式 */
        .pet-label {
            font-size: 90%;
            padding: 0.3em 0.8em;
            border-radius: 50px;
            background: var(--accent-color);
            color: white;
        }

        /* 特色宠物图标 */
        .pet-icon {
            font-size: 3rem;
            color: var(--primary-color);
            text-align: center;
            margin: 20px 0;
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* 宠物二维码 */
        .pet-qrcode {
            background: white;
            padding: 10px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border: 2px solid var(--primary-color);
            display: inline-block;
            margin-top: 15px;
        }

        .pet-feature {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            background: rgba(255, 250, 240, 0.8);
            padding: 10px;
            border-radius: 10px;
        }

        .pet-feature i {
            font-size: 24px;
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .contact-info {
            margin-top: 20px;
            background: rgba(255, 250, 240, 0.8);
            padding: 15px;
            border-radius: 15px;
            border-left: 4px solid var(--primary-color);
        }

        .contact-info p {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .contact-info i {
            margin-right: 10px;
            color: var(--primary-color);
            font-size: 1.2em;
            min-width: 25px;
            text-align: center;
        }

        .version-badge {
            background: var(--accent-color);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            margin-right: 10px;
            font-size: 0.9rem;
        }

        /* 宠物图案装饰 */
        .pet-decoration {
            position: absolute;
            opacity: 0.3;
            z-index: -1;
        }

        .decoration-1 {
            top: 10%;
            left: 5%;
            width: 120px;
            height: 120px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,15 C60,5 80,5 90,15 C100,25 100,45 90,55 C80,65 60,65 50,55 C40,65 20,65 10,55 C0,45 0,25 10,15 C20,5 40,5 50,15 Z" fill="%23ff9a3c"/><circle cx="30" cy="30" r="8" fill="white"/><circle cx="70" cy="30" r="8" fill="white"/><circle cx="30" cy="30" r="4" fill="black"/><circle cx="70" cy="30" r="4" fill="black"/><path d="M40,50 Q50,60 60,50" stroke="black" fill="none" stroke-width="3"/></svg>');
        }

        .decoration-2 {
            bottom: 15%;
            right: 5%;
            width: 100px;
            height: 100px;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M30,30 Q40,5 60,5 Q80,5 70,30 Q80,40 70,55 Q60,70 40,70 Q20,70 30,55 Q20,40 30,30 Z" fill="%235d9c59"/></svg>');
            transform: rotate(30deg);
        }

        /* 热门宠物展示 */
        .featured-pets {
            margin: 50px 0;
        }

        .pet-card-mini {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin: 10px;
        }

        .pet-card-mini:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(255, 107, 107, 0.2);
        }

        .pet-card-img {
            height: 180px;
            overflow: hidden;
        }

        .pet-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .pet-card-mini:hover .pet-card-img img {
            transform: scale(1.1);
        }

        .pet-card-content {
            padding: 15px;
        }

        .pet-card-content h4 {
            color: var(--dark-color);
            margin-bottom: 5px;
            font-size: 1.1rem;
        }

        .pet-card-content p {
            font-size: 0.9rem;
            color: var(--text-color);
            margin-bottom: 10px;
        }

        .owl-nav {
            position: absolute;
            top: 30%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }

        .owl-prev, .owl-next {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.7) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: var(--dark-color) !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .owl-prev:hover, .owl-next:hover {
            background: var(--primary-color) !important;
            color: white !important;
        }

        .avatar-container {
            display: flex;
            align-items: center;
            margin-top: 20px;
        }

        .customer-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
            border: 3px solid var(--primary-color);
            flex-shrink: 0;
        }

        .avatar-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .about-pet-info h4 {
            margin: 0;
            font-size: 1.2rem;
        }

        .about-pet-info p {
            margin: 5px 0 0;
            font-size: 0.9rem;
            color: #777;
        }

        .donation-text {
            position: relative;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            padding: 20px;
            border-radius: 15px;
            margin: 20px 0;
            color: white;
        }

        .donation-text::after {
            content: "🐾";
            position: absolute;
            top: -30px;
            right: 20px;
            font-size: 3rem;
            opacity: 0.3;
        }
	</style>
</head>

<body>
<!-- 动态爪印背景 -->
<div class="paw-prints">
	<div class="paw" style="top: 10%; left: 20%; animation-delay: 0s;"></div>
	<div class="paw" style="top: 20%; left: 80%; animation-delay: -2s;"></div>
	<div class="paw" style="top: 40%; left: 15%; animation-delay: -4s;"></div>
	<div class="paw" style="top: 70%; left: 70%; animation-delay: -6s;"></div>
	<div class="paw" style="top: 85%; left: 40%; animation-delay: -1s;"></div>
	<div class="paw" style="top: 25%; left: 45%; animation-delay: -3s;"></div>
</div>

<!-- 宠物装饰元素 -->
<div class="pet-decoration decoration-1"></div>
<div class="pet-decoration decoration-2"></div>

<!-- 头部区域 -->
<div class="pet-header text-center py-4">
	<div class="hero-carousel owl-carousel owl-theme">
		<div class="carousel-item" style="background-image: url('https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80')">
			<div class="carousel-caption">
				<h1>若依宠物商城管理系统</h1>
				<p>专为宠物行业打造的高级后台管理平台</p>
			</div>
		</div>
		<div class="carousel-item" style="background-image: url('https://img1.baidu.com/it/u=2653798623,1672548314&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500')">
			<div class="carousel-caption">
				<h1>一站式宠物解决方案</h1>
				<p>管理用品、医疗、美容、寄养等全方位服务</p>
			</div>
		</div>
		<div class="carousel-item" style="background-image: url('https://pic.rmb.bdstatic.com/bjh/240611/dump/b902e7808e8d5d43784e48649929ab28.jpeg')">
			<div class="carousel-caption">
				<h1>用心服务每一只宠物</h1>
				<p>为您的宠物提供最专业的服务与管理</p>
			</div>
		</div>
	</div>
</div>

<div class="container my-5">
	<div class="row border-bottom dashboard-header">
		<div class="col-lg-4">
			<div class="pet-card">
				<div class="pet-card-body text-center">
					<div class="pet-icon">
						<i class="fas fa-dog"></i>
					</div>
					<div class="pet-image-container">
						<img src="http://copyright.bdstatic.com/vcg/creative/b9a3d69c10575c4565076e544db39116b6ed367e.jpg" alt="可爱狗狗" class="pet-image">
					</div>
					<h3>您好，管理员</h3>
					<p class="mt-3">移动设备访问请扫描二维码</p>
					<div class="pet-qrcode animated-float">
						<img src="https://img.tusij.com/ips_templ_preview/2020-02-15/7e/7e55db4f-b8c2-4fbd-a575-2afa239a9f0d.png!w585?auth_key=1765152000-0-0-8844994fd1192b752240acf84a734d38" alt="宠物商城二维码" width="150">
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-5">
			<div class="pet-card">
				<div class="pet-card-body">
					<h2><i class="fas fa-store"></i> 若依宠物商城系统</h2>
					<p class="mt-3">专为宠物行业设计的后台管理系统，可用于<b>宠物用品管理</b>，<b>宠物医疗服务</b>，<b>宠物美容预约</b>，<b>宠物寄养服务</b>，<b>会员管理</b>等。系统提供完整的宠物行业解决方案，帮助商家高效管理业务。</p>
					<p class="mt-3">
						<b>当前版本：</b><span class="pet-label">v5.0</span>
					</p>

					<div class="pet-image-container mt-4">
						<img src="https://img1.baidu.com/it/u=1538922430,3087939698&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="宠物商城" class="pet-image">
					</div>

					<p class="mt-4 text-center">
						<a href="https://gitee.com/y_project/RuoYi" class="pet-btn" target="_blank">
							<i class="fas fa-download"></i> 下载系统
						</a>
						<a href="http://localhost:63342/marketing-system/ruoyi-admin/templates/tool/build/per.html?_ijt=cts3hehnqeae6lma1ae5a51u0r&_ij_reload=RELOAD_ON_SAVE" class="pet-btn ml-2" style="background: var(--accent-color);" target="_blank">
							<i class="fas fa-globe"></i> 查看销量
						</a>
					</p>
				</div>
			</div>
		</div>
		<div class="col-lg-3">
			<div class="pet-card">
				<div class="pet-card-body">
					<h4><i class="fas fa-star"></i> 功能特色：</h4>
					<ul style="list-style: none; padding-left: 0;">
						<li><i class="fas fa-paw text-primary mr-2"></i> 宠物信息管理</li>
						<li><i class="fas fa-heartbeat text-primary mr-2"></i> 宠物健康记录</li>
						<li><i class="fas fa-shopping-cart text-primary mr-2"></i> 商品进销存管理</li>
						<li><i class="fas fa-calendar-check text-primary mr-2"></i> 预约服务系统</li>
						<li><i class="fas fa-coins text-primary mr-2"></i> 会员积分系统</li>
						<li><i class="fas fa-store-alt text-primary mr-2"></i> 多门店管理</li>
						<li><i class="fas fa-mobile-alt text-primary mr-2"></i> 移动端适配</li>
					</ul>

					<div class="pet-image-container mt-4">
						<img src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1468&q=80" alt="宠物护理" class="pet-image">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 热门宠物展示 -->
<div class="container">
	<h2><i class="fas fa-crown"></i> 热门宠物品种</h2>

	<div class="featured-pets owl-carousel owl-theme">
		<!-- 宠物卡片 1 -->
		<div class="item">
			<div class="pet-card-mini">
				<div class="pet-card-img">
					<img src="https://img2.baidu.com/it/u=2437130464,2479029001&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="金毛犬">
				</div>
				<div class="pet-card-content">
					<h4>金毛寻回犬</h4>
					<p>温顺友善，非常聪明，适合家庭饲养</p>
				</div>
			</div>
		</div>

		<!-- 宠物卡片 2 -->
		<div class="item">
			<div class="pet-card-mini">
				<div class="pet-card-img">
					<img src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="布偶猫">
				</div>
				<div class="pet-card-content">
					<h4>布偶猫</h4>
					<p>温顺好静，对人友善，有着蓝宝石般的眼睛</p>
				</div>
			</div>
		</div>

		<!-- 宠物卡片 3 -->
		<div class="item">
			<div class="pet-card-mini">
				<div class="pet-card-img">
					<img src="https://img0.baidu.com/it/u=4209614424,3685121865&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800" alt="柯基犬">
				</div>
				<div class="pet-card-content">
					<h4>柯基犬</h4>
					<p>短腿小可爱，活泼聪明，深受人们喜爱</p>
				</div>
			</div>
		</div>

		<!-- 宠物卡片 4 -->
		<div class="item">
			<div class="pet-card-mini">
				<div class="pet-card-img">
					<img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1443&q=80" alt="英国短毛猫">
				</div>
				<div class="pet-card-content">
					<h4>英国短毛猫</h4>
					<p>圆润可爱，性格温和，易于饲养</p>
				</div>
			</div>
		</div>

		<!-- 宠物卡片 5 -->
		<div class="item">
			<div class="pet-card-mini">
				<div class="pet-card-img">
					<img src="https://t9.baidu.com/it/u=2048762193,774180563&fm=193" alt="哈士奇">
				</div>
				<div class="pet-card-content">
					<h4>哈士奇</h4>
					<p>精力充沛，表情丰富，被称为"表情帝"</p>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container mt-5">
	<div class="row">
		<div class="col-md-4">
			<div class="pet-card">
				<div class="pet-card-header">
					<i class="fas fa-address-book"></i>
					<h5>联系信息</h5>
				</div>
				<div class="pet-card-body">
					<div class="contact-info">
						<p><i class="fas fa-globe"></i> 官网：<a href="http://www.ruoyi.vip" target="_blank">http://www.ruoyi.vip</a></p>
						<p><i class="fab fa-qq"></i> QQ群：<a href="#" target="_blank">宠物商城交流群 (123456789)</a></p>
						<p><i class="fab fa-weixin"></i> 微信：客服微信 (ruoyi-pets)</p>
						<p><i class="fas fa-envelope"></i> 邮箱：support@pets.ruoyi.vip</p>
					</div>

					<div class="avatar-container">
						<div class="customer-avatar">
							<img src="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1476&q=80" alt="客服猫">
						</div>
						<div class="about-pet-info">
							<h4>客服小猫猫</h4>
							<p>喵喵客服专员</p>
							<p>24小时在线解决您的疑问</p>
						</div>
					</div>

					<div class="mt-4">
						<h5><i class="fas fa-paw"></i> 特色服务</h5>
						<div class="pet-feature">
							<i class="fas fa-shield-alt"></i>
							<div>
								<strong>健康无忧计划</strong>
								<p>宠物定期体检与健康保障</p>
							</div>
						</div>
						<div class="pet-feature">
							<i class="fas fa-home"></i>
							<div>
								<strong>安心寄养</strong>
								<p>五星级宠物寄养服务</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="pet-card">
				<div class="pet-card-header">
					<i class="fas fa-sync-alt"></i>
					<h5>系统动态</h5>
				</div>
				<div class="pet-card-body">
					<div class="mb-4">
						<span class="version-badge">v5.0</span>
						<strong>2023.11.15</strong>
						<p class="mt-2">新增宠物健康档案管理功能，优化预约系统。</p>
						<div class="pet-image-container">
							<img src="https://img1.baidu.com/it/u=4153263416,8006774&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="系统更新" class="pet-image">
						</div>
					</div>

					<div class="mb-4">
						<span class="version-badge">v4.9</span>
						<strong>2023.08.20</strong>
						<p class="mt-2">增加多门店管理功能，提升库存管理系统。</p>
						<div class="pet-image-container">
							<img src="https://images.unsplash.com/photo-1450778869180-41d0601e046e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1466&q=80" alt="门店管理" class="pet-image">
						</div>
					</div>

					<div class="mb-4">
						<span class="version-badge">v4.8</span>
						<strong>2023.05.10</strong>
						<p class="mt-2">会员积分系统升级，增加移动端管理功能。</p>
						<div class="pet-image-container">
							<img src="https://images.unsplash.com/photo-1560749003-f4b1e17e2dff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="移动端" class="pet-image">
						</div>
					</div>

					<div class="text-center mt-4">
						<a href="#" class="pet-btn" style="background: var(--accent-color);">
							<i class="fas fa-history"></i> 查看全部更新
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="pet-card">
				<div class="pet-card-header">
					<i class="fas fa-gift"></i>
					<h5>支持我们</h5>
				</div>
				<div class="pet-card-body">
					<div class="donation-text">
						<p>您的支持将用于帮助流浪宠物救助和系统持续开发。每笔捐赠都会为待领养的流浪宠物提供食物和医疗！</p>
					</div>

					<div class="text-center">
						<div class="pet-icon">
							<i class="fas fa-heart"></i>
						</div>
						<p>感谢您使用若依宠物商城系统！</p>

						<div class="mt-4">
							<div class="pet-qrcode d-inline-block">
								<div class="pet-image-container" style="height: 150px;">
									<img src="https://img2.baidu.com/it/u=3989518652,2538309151&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=528" alt="救助宠物" class="pet-image">
								</div>
								<p>支付宝捐赠</p>
							</div>
							<div class="pet-qrcode d-inline-block ml-3">
								<div class="pet-image-container" style="height: 150px;">
									<img src="https://img0.baidu.com/it/u=3448586961,1286595334&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="救助宠物" class="pet-image">
								</div>
								<p>微信捐赠</p>
							</div>
						</div>

						<div class="mt-4">
							<div class="pet-image-container" style="height: 200px;">
								<img src="https://5b0988e595225.cdn.sohucs.com/images/20171218/dc2ff90205b047e4a9f69c340dbec564.jpeg" alt="需要帮助的宠物" class="pet-image">
							</div>
							<p>您捐赠的每一分钱都将用于帮助这些可爱的生命</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<footer class="text-center py-4 mt-5" style="background: var(--dark-color); color: white;">
	<div class="container">
		<p>© 2023 若依宠物商城管理系统 - 专为宠物行业设计的高级管理平台</p>
		<p>联系电话：400-123-4567 | 邮箱：info@ruoyi-pets.com</p>
		<div class="mt-2">
			<a href="#" class="text-light mx-2"><i class="fab fa-weixin"></i></a>
			<a href="#" class="text-light mx-2"><i class="fab fa-weibo"></i></a>
			<a href="#" class="text-light mx-2"><i class="fab fa-qq"></i></a>
			<a href="#" class="text-light mx-2"><i class="fab fa-github"></i></a>
		</div>
	</div>
</footer>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
	// 动态生成更多爪印
    document.addEventListener('DOMContentLoaded', function() {
        const pawPrints = document.querySelector('.paw-prints');
        for (let i = 0; i < 10; i++) {
            const paw = document.createElement('div');
            paw.className = 'paw';
            paw.style.top = Math.random() * 100 + '%';
            paw.style.left = Math.random() * 100 + '%';
            paw.style.animationDelay = (Math.random() * -8) + 's';
            paw.style.width = (30 + Math.random() * 40) + 'px';
            paw.style.height = paw.style.width;
            pawPrints.appendChild(paw);
        }

        // 添加装饰性交互效果
        const cards = document.querySelectorAll('.pet-card');
        cards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-8px)';
            });

            card.addEventListener('mouseleave', function() {
                this.style.transform = '';
            });
        });

        // 初始化轮播
        $('.hero-carousel').owlCarousel({
            items: 1,
            loop: true,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            nav: false,
            dots: false,
            animateOut: 'fadeOut'
        });

        // 初始化热门宠物轮播
        $('.featured-pets').owlCarousel({
            loop: true,
            margin: 20,
            nav: true,
            dots: false,
            autoplay: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 4
                }
            }
        });
    });
</script>
</body>
</html>